<template>
  <div>
    <!-- 面包屑 -->
    <!-- 面包屑 -->
    <div class="home-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >数字车间</el-breadcrumb-item>
        <el-breadcrumb-item >设备列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 表 -->
    <div class="table-container">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="equipmentId" label="设备编号" width="100"></el-table-column>
        <el-table-column prop="equipmentName" label="名称" width="180">
          <template slot-scope="scope">
            <!-- <a href="#" @click="handClickPush(scope.row.equipmentName)" class="buttonText">{{scope.row.equipmentName}}</a> -->
            <router-link :to="'/equipmentList/'+scope.row.equipmentId" >{{scope.row.equipmentName}}</router-link>
          </template>
        </el-table-column>
        <el-table-column prop="mode" label="设备类型" width="180"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column prop="status" label="运行状态" width="180"></el-table-column>
        <el-table-column prop="updateTime" label="更新日期" width="200"></el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.currentPage"
        :page-sizes="[10,50,100, 200, 300, 400]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.pageInfo.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
  import EquipTypeApi from '@/api/equipType'
export default {
  // 设备列表
  name: "Equipment",
  data() {
    return {
      // 表数据
      tableData: [],
      // 分页
      // 分页
      pageInfo:{
        // pageNo:1,
        pageSize:10,
        currentPage: 1,
        count:0
      },
    };
  },
  methods: {
    getEquipList(){
      EquipTypeApi.eEquipmentypeList(this.pageInfo).then(res => {
        if(res.data.status === "200"){
          this.tableData = res.data.data.records
          // 总数
          this.pageInfo.total = res.data.data.total
        }
      })
    },
    // 分页相关
    handleSizeChange(val) {
      this.pageInfo.pageSize = val
      // 置
      this.pageInfo.currentPage = 1

      this.getEquipList()

    },
    handleCurrentChange(val) {
      this.pageInfo.currentPage = val
      
      this.getEquipList()
    },
    // 点击链接跳转
    handClickPush(name) {
      // this.$router.push({
      //   path:"/equipmentList/"+name,
      // })
    },
  },
  // 获取设备list
  created() {
    this.getEquipList()
  }
};
</script>
<style scoped lang="less">
.table-container {
  width: 95%;
  margin: 0 auto;
  margin-top: 30px;
}
.el-pagination {
  margin: 10px 20px 0 0;
  text-align: end;
}
</style>
